<template>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft"
               style="--van-nav-bar-text-color: #FFC000;--van-nav-bar-icon-color:#FFC000"></van-nav-bar>
  <div>
    <template v-if="user">
      <van-cell title="校园卡号" is-link to="update/edit" :value="user?.ubankcard ? '**** **** **** ' + user.ubankcard : ''" @click="toEdit('ubankcard', '校园卡号','')"/>
      <van-cell title="姓名" is-link :value="user?.uname" @click="toEdit('uname', '姓名', '')"/>
      <van-cell title="学院" is-link to="/my/update/edit" :value="user.udepartment"
                @click="toEdit('udepartment', '学院', user?.udepartment)"/>
      <van-cell title="班级" is-link to="/my/update/edit" :value="user.uclass"
                @click="toEdit('uclass', '班级', user?.uclass)"/>
      <van-cell title="手机号" is-link to="update/edit" :value="user?.uphone"
                @click="toEdit('uphone', '手机号','')"/>
    </template>
    <van-cell center title="姓名隐藏">
      <template #right-icon>
        <van-switch v-model="isMatchMode" active-color="#FCC70E"  @change="handleSwitchChange"/>
      </template>
    </van-cell>
    <van-cell title="关于校卡帮" is-link to="/about" />
  </div>
  <div class="footer">
    <p style="font-size: 12px">1.姓名仅用于企业微信查找</p>
    <p style="font-size: 12px">2.姓名隐藏后联系方式只显示手机号</p>
    <p style="font-size: 12px">3.提前补充完整信息可实现丢卡预警功能</p>
  </div>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios";
import {getCurrentUser} from "../services/user";
import type {userType} from "../model/user";
import axios from "axios";
import {showFailToast} from "vant";

const user = ref<userType>();
const route = useRoute();
const isMatchMode = ref<boolean>(false);
onMounted(async () => {
  const res = await getCurrentUser();
  // @ts-ignore
  if (res?.code === 40100 || res.data == null) {
    router.push({
      path: '/phone',
      replace: true,
    });
  }
  // @ts-ignore
  if (res.code === 200) {
    user.value = res.data
    if (user.value?.namePrivacy === 0) {
       isMatchMode.value = false;
    } else if(user.value?.namePrivacy === 1 ){
       isMatchMode.value = true;
    }
  }
})
const router = useRouter();


//如果user.bankcardStatus=0,isMatchMode就是false,bankcardStatus=1,isMatchMode就是true

//如果按钮为true,那么请求myAxios.post(/update),更新user.bankcardStatus=0
//如果按钮为false,那么请求myAxios.post(/update),更新user.bankcardStatus=1
const loadData = async () => {
  try {
    const res = await myAxios.post('/update', {
      namePrivacy:  isMatchMode.value ? 1 : 0,
      ubankcard:"",
      uname: "",
      uphone:"",
      udepartment: "",
      uclass: "",
      uid: ""
    });
    // @ts-ignore
    if (res?.code === 200) {
    } else {
      console.log("失败");
    }
  } catch (error) {
    console.error("请求失败", error);
  }
};

const handleSwitchChange = async () => {
  if(user.value?.uphone!=null){
    await loadData();
  }else{
    isMatchMode.value = false;
    showFailToast('请先绑定手机号后开启');
  }
};


const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/update/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}

const onClickLeft = () => {
  router.push("/user")
};

</script>

<style scoped>
.footer {
  padding: 30px;
  text-align: left;
  color: #C3C3C3; /* 浅灰色文字颜色 */
  font-size: 14px;
  position: fixed;
  left: 0;
  width: 100%;
}
</style>